<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

		<title>CMS - 登录</title>
		<link href="__CSS__/bootstrap.min.css" rel="stylesheet">
		<link href="__CSS__/font-awesome.min.css" rel="stylesheet">
		<link href="__CSS__/animate.min.css" rel="stylesheet">
		<link href="__CSS__/style.min.css" rel="stylesheet">
		<link href="__CSS__/login.min.css" rel="stylesheet">
		<!--[if lt IE 9]>
	    <meta http-equiv="refresh" content="0;ie.html" />
	    <![endif]-->
	</head>

	<body class="signin">
		<div class="signinpanel">
			<div class="row">
				<div class="col-sm-7">
					<div class="signin-info">
						<div class="logopanel m-b">
							<h1>CMS商家后台管理系统</h1>
						</div>
						<div class="m-b"></div>
						<h4>欢迎使用 <strong>CMS商家后台管理系统！</strong></h4>
					</div>
				</div>
				<div class="col-sm-5">
					<form id="doLogin" method="post" action="{:url('login/login')}">
						<h4 class="no-margins">登录：</h4>
						<input type="text" id="login_name" name="login_name" class="form-control uname" placeholder="手机号码" />
						<input type="password" id="login_pwd" name="login_pwd" class="form-control pword m-b" placeholder="登录密码" />
						<div><input type="text" id="verify" style="width: 90px;display: inline;" name="verify" maxlength="4" class="form-control yzm m-b" placeholder="验证码" autocomplete="off" /> {:captcha_img()}</div>
						<button type="submit" class="btn btn-success btn-block" style="width: 100px;display: inline;">登 录</button>
						<!--<button type="button"  onclick="register();" class="btn btn-success btn-block" style="width: 100px;display: inline;margin-left: 20px;">注册</button>-->
					</form>
				</div>
			</div>
			<div class="signup-footer">
				<div class="pull-left">
					&copy; 2017 All Rights Reserved. CMS
				</div>
			</div>
		</div>
		<script src="__JS__/jquery.min.js"></script>
		<script src="__JS__/bootstrap.min.js"></script>
		<script src="__JS__/jquery.form.js"></script>
		<script src="__LIB__/layer/layer.js"></script>
		<script>
			function register(){
				var open='<div class="col-sm-5" style="margin-left:100px;width:300px;margin-top:-5px;">'+
						'<p><span id="error_tips" style="color: red;display: none;margin:3px 5px;padding:0;">请输入正确的手机号码</span></p>'+
						'<h4 class="no-margins">快速注册：</h4>'+
						'<p><input type="text" id="mobile" class="form-control" style="color:#333" placeholder="手机号码" /></p>'+
						'<p><input type="text" id="yzm" style="width:80px;display:inline;color:#333;"   class="form-control " placeholder="验证码" />'+
						'<button  onclick="send(this);" class="btn btn-success btn-block" style="width: 100px;display: inline;margin-left: 20px;">获取验证码</button></p>'+
						'<p><button  onclick="reg();"  class="btn btn-info btn-block" style="width: 100px;display: inline;">注 册</button><button onclick="javascript:layer.closeAll();"  class="btn btn-danger btn-block" style="width: 100px;display: inline;margin-left:30px">取 消</button></p></p>'+
						'</div>';
					var index=layer.open({
						  title: '快速注册',
						  zIndex :1999,
					 	  area: ['500px', '300px'] ,
						  content: open,
						  btn:false
					});

			}
			function reg(){
				var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
				var mobile=$("#mobile").val();
				if(!myreg.test(mobile)) 
				{ 
					$("#error_tips").html("请输入正确的手机号码!");
				    $("#error_tips").show();
				    return false; 
				} 
				var code=$("#yzm").val();
				if(code==""){
					$("#error_tips").html("请输入验证码!");
					$("#error_tips").show();
				    return false; 
				}
				$.ajax({
					type:"post",
					data:{mobile:mobile,code:code},
					url:"register",
					success:function(data){
						if(data.code==200){
							layer.msg(data.msg);
						}else{
							layer.msg(data.msg);
						}
					}
				});
			}
			function send(obj){
				var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
				var mobile=$("#mobile").val();
				if(!myreg.test(mobile)) 
				{ 
				    $("#error_tips").html("请输入正确的手机号码!");
				    $("#error_tips").show();
				    return false; 
				} 
				$.ajax({
					type:"post",
					data:{mobile:mobile},
					url:"/api/System/get_login_sms",
					success:function(data){
						alert(data.msg);
					}
				});
				var num = 60;
				var timer = setInterval(function() {
					num--;
					if(num == 0) {
						$(this).html("获取验证码");
						//定时器停了
						clearInterval(timer);
						onoff = true;
					} else {
						$(this).html(num + 'S');
					}
				}, 1000); // 1000 毫秒==1秒
			}
			$(function() {
				$('#doLogin').ajaxForm({
					beforeSubmit: checkForm, // 此方法主要是提交前执行的方法，根据需要设置      
					success: complete, // 这是提交后的方法
					dataType: 'json'
				});

				function checkForm() {
					if('' == $.trim($('#login_name').val())) {
						layer.msg('请输入登录用户名');
						return false;
					}

					if('' == $.trim($('#login_pwd').val())) {
						layer.msg('请输入登录密码');
						return false;
					}

					if('' == $.trim($('#verify').val())) {
						layer.msg('请输入验证码');
						return false;
					}

					$("button").removeClass('btn-primary').addClass('btn-danger').text("登录中...");
				}

				function complete(info) {
					if(info.code == 1) {
						layer.msg(info.msg);
						window.location.href = info.url;
					} else {
						layer.msg(info.msg);
						$("button").removeClass('btn-danger').addClass('btn-primary').text("登 录");
						$("#verify").val("");
						$(".captcha").click();
						return false;
					}

				}

			});
		</script>
	</body>

</html>